<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.liuyan.util.TokenGen" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%--防止表单重复提交--%>
    <%
        TokenGen.getInstance().saveToken(request);
        String s = (String)session.getAttribute("token");

    %>

    <title>留言板快速登录注册</title>
    <link href="../liuyan/images/icon.ico" rel="icon" type="image/x-icon">
    <script type="text/javascript" src="../liuyan/js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../liuyan/js/login.js"></script>
    <link href="../liuyan/css/login2.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../liuyan/layer/layer.js"></script>
    <style type="text/css">
        #check div{
            float: left;
        }
        #check2 div{
            float: left;
        }
    </style>
    <script language="javascript" type="text/javascript">
        var code ; //在全局 定义验证码
        function createCode(){
            code = "";
            var codeLength = 4;//验证码的长度
            //所有候选组成验证码的字符，可以用中文
            var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C',
                    'D','E','F','G','H','I','J','K','L','M','N','O','P',
                    'Q','R','S','T','U','V','W','X','Y','Z','a','b','c',
                    'd','e','f','g','h','i','j','k','l','m','n','o','p',
                    'q','r','s','t','u','v','w','x','y','z');
            for(var i=0;i<codeLength;i++){
                var charIndex = Math.floor(Math.random()*60);
                code +=selectChar[charIndex];
            }
            return code;
        }

        function show(){
            //显示验证码
            document.getElementById("code").src="CodeServlet?code="+createCode();
        }
        function show2(){
            //显示验证码
            document.getElementById("code2").src="CodeServlet?code="+createCode();
        }
        window.onload = function() {
            //document.onload=show();
            show();//页面加载时加载验证码
            //这时无论在ie还是在firefox中，js没有加载完，页面的东西是不会被执行的；
        }
    </script>
</head>
<body>
<center>
<div class="login" style="margin-top: 130px">

    <div class="header">
        <div class="switch" id="switch"><a class="switch_btn_focus" id="switch_qlogin" href="javascript:changeToLogin()" tabindex="7">快速登录</a>
            <a class="switch_btn" id="switch_login" href="javascript:changeNoLogin()" tabindex="8">快速注册</a><div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;"></div>
        </div>
    </div>


    <div class="web_qr_login" id="web_qr_login" style="display: block; height: 260px;">

        <!--登录-->
        <div class="web_login" id="web_login">


            <div class="login-box">


                <div class="login_form">
                    <form  name="loginform" accept-charset="utf-8" id="login_form"  class="loginForm" method="post"><input type="hidden" name="did" value="0"/>
                        <input type="hidden" name="to" value="log"/>
                        <input type="hidden" name="token" value="<%=s%>"/><%--防止表单重复提交--%>
                        <div class="uinArea" id="uinArea">
                            <label class="input-tips" for="username">用户：</label>
                            <div class="inputOuter" id="uArea">

                                <input type="text" id="username" name="username" class="inputstyle"/>
                            </div>
                        </div>
                        <div class="pwdArea" id="pwdArea">
                            <label class="input-tips" for="userpwd">密码：</label>
                            <div class="inputOuter" id="pArea">

                                <input type="password" id="userpwd" name="userpwd" class="inputstyle"/>
                            </div>
                        </div>
                        <div id="check">
                            <div style="margin-top: 7px;margin-left:1px">验证码&nbsp;:&nbsp;&nbsp;<input id="vcode"  maxLength="5"  type="text" style="width: 80px;font-size: 15px"></div>
                            <div style="margin-left: 10px"><img src="CodeServlet" id="code" onclick="show();return false;" title="换一张" /></div>
                            <div style="margin-left: 10px;margin-top:14px"><a href="javascript:show();">换一张</a></div>
                        </div>

                        <div style="padding-left:50px;margin-top:50px;"><input type="button" onclick="userLogin();" value="登 录" style="width:150px;" class="button_blue"/></div>
                    </form>
                </div>


            </div>

        </div>
        <!--登录end-->
    </div>

    <!--注册-->
    <div class="qlogin" id="qlogin" style="display: none; ">

        <div class="web_login"><form name="form2" id="regUser" accept-charset="utf-8" method="post">
            <input type="hidden" name="to" value="reg"/>
            <input type="hidden" name="did" value="0"/>
            <input type="hidden" name="token" value="<%=s%>"/><%--防止表单重复提交--%>
            <ul class="reg_form" id="reg-ul">
                <div id="userCue" class="cue">快速注册请注意格式</div>
                <li>

                    <label for="user"  class="input-tips2">用户名：</label>
                    <div class="inputOuter2">
                        <input type="text" id="user" name="user" maxlength="16" class="inputstyle2"/>
                    </div>

                </li>

                <li>
                    <label for="passwd" class="input-tips2">密码：</label>
                    <div class="inputOuter2">
                        <input type="password" id="passwd"  name="passwd" maxlength="16" class="inputstyle2"/>
                    </div>

                </li>
                <li>
                    <label for="passwd2" class="input-tips2">确认密码：</label>
                    <div class="inputOuter2">
                        <input type="password" id="passwd2" name="" maxlength="16" class="inputstyle2" />
                    </div>

                </li>
                <li>
                    <div id="check2">
                        <div style="margin-top: 7px;margin-left: 36px">验证码&nbsp;:&nbsp;&nbsp;<input  id="vcode2"  maxLength="5"  type="text" style="width: 80px;font-size: 15px"></div>
                        <div style="margin-left: 10px"><img src="" id="code2" onclick="show2();return false;" title="看不清？单击换一张图片" /></div>
                        <div style="margin-left: 10px;margin-top:14px"><a href="javascript:show2();">换一张</a></div>
                    </div>

                </li>
                <li>
                    <div class="inputArea">
                        <input type="button" id="reg" onclick="userRegister();" style="margin-top:10px;margin-left:85px;" class="button_blue" value="点击注册"/>
                    </div>

                </li><div class="cl"></div>
            </ul></form>
        </div>
    </div>
    <!--注册end-->
</div>
</center>
<script type="text/javascript">
    var message = "";
    <c:if test="${!empty message}">
    message ="${message}";
    </c:if>
    if(message=="noLogin"){
        layer.alert('当前登录失效，请重新登录', {
            icon: 5,
            skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
        });
    }

    var isLogin = 1;

    function changeToLogin(){
        isLogin =1;
    }
    function changeNoLogin() {
        isLogin = 0;
    }
    //点击enter登录，因为注册跟登录是一个页面，所以定义一个isLogin区分开
    $(document).keydown(function(event){
        var code = event.keyCode;
        if(code==13&isLogin==1){
            userLogin();
        }
    });

    //点击enter注册，因为注册跟登录是一个页面，所以定义一个isLogin区分开
    $(document).keydown(function(event){
        var code = event.keyCode;
        if(code==13&isLogin==0){
            userRegister();
        }
    });

    /*正则验证用户名，密码*/
    var regUser = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
    var regPwd = /^[0-9a-zA-Z]+$/;
    /*用户登录*/
    function userLogin(){
        var username = $("#username").val();
        var userpwd = $("#userpwd").val();
        if (username.length < 3 || username.length > 8 || !regUser.test(username)) {
            layer.alert('用户名应为3-8位的字母、数字、汉字', {
                icon: 2,
                skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
            });
            $("#username").focus();
            return;
        }
        if (userpwd.length < 6 || userpwd.length > 12 || !regPwd.test(userpwd)) {
            layer.alert("密码应为6-12位的字母、数字", {
                icon: 2,
                skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
            });
            $("#userpwd").focus();
            return;
        }

        var inputCode = document.getElementById("vcode").value.toLowerCase();
        if(inputCode.length <=0){
            layer.alert("请输入验证码", {
                icon: 2,
                skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
            });
            $("#vcode").focus();
            return false;
        }
        else if(inputCode != code.toLowerCase()){
            layer.alert("验证码错误", {
                icon: 2,
                skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
            });
            $("#vcode").focus();;
            show();//刷新验证码
            return false;
        }

        var indexLoad = layer.load(0, {shade: false});//加载层
        $.ajax({
            type:"post",
            url:"userLoginController.do?method=login",
            data:$('#login_form').serialize(),//这种方式提交整个表单
            success:function(data){
                layer.close(indexLoad);//关闭加载层
                if(data == "SUCCESS"){
                    window.location.href="userLoginController.do?method=loginSuccess";
                }else if(data == "FAIL"){
                    layer.alert("用户名或密码错误，请重新登录", {
                        icon: 2,
                        skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    },function(index){
                        /*点击alert的确定回调函数，清空登录页面填写的值，关闭弹窗*/
                        $("#username").val('');
                        $("#userpwd").val('');
                        layer.close(index);
                    });
                }else{
                    layer.alert(data)
                }
            }
        })
    }

    /*用户注册*/


    function userRegister(){

        var user = $('#user').val();
        if (user.length < 3 || user.length > 8 || !regUser.test(user)) {

            $('#user').focus().css({
                border:"1px solid red",
                boxShadow: "0 0 2px red"
            });
            $('#userCue').html("<font color='red'><b>用户名为3-8位的字母、数字、汉字</b></font>");
            return false;
        }

        var passwd = $('#passwd').val();
        if (passwd.length < 6 || passwd.length > 12 || !regPwd.test(passwd)) {
            $('#passwd').focus();
            $('#userCue').html("<font color='red'><b>密码为6-12位的字母、数字</b></font>");
            return false;
        }
        if ($('#passwd2').val() != $('#passwd').val()) {
            $('#passwd2').focus();
            $('#userCue').html("<font color='red'><b>两次密码不一致！</b></font>");
            return false;
        }
        /*验证码校验*/
        var inputCode2 = document.getElementById("vcode2").value.toLowerCase();
        if(inputCode2.length <=0){
            $("#vcode2").focus();
            $('#userCue').html("<font color='red'><b>请输入验证码！</b></font>");
            return false;
        }
        else if(inputCode2 != code.toLowerCase()){
            $("#vcode2").focus();
            $('#userCue').html("<font color='red'><b>验证码错误！</b></font>");
            show2();//刷新验证码
            return false;
        }

        var indexLoad = layer.load(0, {shade: false});//加载层
        $.ajax({
            type:"post",
            url:"userLoginController.do?method=register",
            data:"user="+$('#user').val()+"&passwd="+$('#passwd').val(),
            success:function(data){
                layer.close(indexLoad);//关闭加载层
                if(data=="SUCCESS"){
                    layer.alert("注册成功，请登录", {
                        icon: 6,
                        skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    },function(index){
                        /*点击alert的确定回调函数*/

                        /*注册成功后，回到登录页面*/
                        $('#switch_login').removeClass("switch_btn_focus").addClass('switch_btn');
                        $('#switch_qlogin').removeClass("switch_btn").addClass('switch_btn_focus');
                        $('#switch_bottom').animate({left:'0px',width:'70px'});
                        $('#qlogin').css('display','none');
                        $('#web_qr_login').css('display','block');

                        /*清空注册页面的值*/
                        $("#user").val('');
                        $("#passwd").val('');
                        $("#passwd2").val('');
                        $("#vcode2").val('');

                        show();//刷新登录页面验证码

                        /*关闭alert弹窗*/
                        layer.close(index);
                    });
                } else if(data == "EXIST"){
                    layer.alert("用户名已经存在，请重新注册", {
                        icon: 2,
                        skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    });
                } else if(data == "FAIL"){
                    layer.alert("注册失败，请重新尝试", {
                        icon: 5,
                        skin: 'layui-layer-lan' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    });
                }else{
                    layer.alert(data);
                }
            }

        })

    }

</script>

</body></html>
